<template>
  <section class="couponUtil">
    <div class="title">
      <div class="text">新用户福利<i></i>专属优惠礼包</div>
      <div class="btn">一键领取</div>
    </div>
    <div class="ticket-wrap">
      <div class="item type1">
        <div class="ticket-top">
          <div class="circle">运费</div>
          <div class="price-wrap">
            <span class="money-icon">￥</span>
            <span class="num">8</span>
            <span class="desc">运费券</span>
          </div>
        </div>
        <div class="ticket-bottom">满0元可用</div>
      </div>
      <div class="item type2">
        <div class="ticket-top">
          <div class="circle">优惠</div>
          <div class="price-wrap">
            <span class="money-icon">￥</span>
            <span class="num">18</span>
            <span class="desc">优惠券</span>
          </div>
        </div>
        <div class="ticket-bottom">满120元可用</div>
      </div>
      <div class="item type2">
        <div class="ticket-top">
          <div class="circle">优惠</div>
          <div class="price-wrap">
            <span class="money-icon">￥</span>
            <span class="num">28</span>
            <span class="desc">优惠券</span>
          </div>
        </div>
        <div class="ticket-bottom">满150元可用</div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data () {
    return {
      
    }
  }
}
</script>
<style lang="less" scoped>
.couponUtil {
  padding: .15rem .1rem;
  background: white;
  .title {
    display: flex;
    font-size: .16rem;
    color: #333;
    justify-content: space-between;
    margin-bottom: .1rem;
    .text {
      padding: 0 .15rem;
      height: .3rem;
      line-height: .3rem;
      position: relative;
      display: flex;
      i{
        width: .16rem;
        height: .3rem;
        position: relative;
        &::after {
          position: absolute;
          content: "";
          width: 3px;
          height: 3px;
          background: #333;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          margin: -.02rem 0 0 -.02rem;
        }
      }
      &::before {
        position: absolute;
        content: "";
        width: .12rem;
        height: .3rem;
        background: url("../../../assets/images/cart-icon-2.png") no-repeat center;
        top: 0;
        left: 0;
        background-size: .12rem;
      }
      &::after {
        transform: rotate(180deg);
        position: absolute;
        content: "";
        width: .12rem;
        height: .3rem;
        background: url("../../../assets/images/cart-icon-2.png") no-repeat center;
        top: 0;
        right: 0;
        background-size: .12rem;
      }
    }
    .btn {
      width: .86rem;
      height: .3rem;
      border-radius: .15rem;
      background-image: linear-gradient(-90deg,#e93b3d,#ff9574);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .14rem;
      color: white;
    }
  }
  .ticket-wrap {
    display: flex;
    justify-content: space-between;
    .item {
      width: 1.14rem;
      height: .64rem;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      &.type1 {
        .ticket-bottom{
          background-image: linear-gradient(-180deg,#7da7ce,#5f92c2 98%);
        } 
        .money-icon {
          color: #7ea7ce;
        }
        .num {
          color: #7ea7ce;
        }
      }
      &.type2 {
        .ticket-bottom{
          background-image: linear-gradient(-179deg,#73d2d4 2%,#53c7ca 99%);
        }
        .money-icon {
          color: #6ed1d3;
        }
        .num {
          color: #6ed1d3;
        }
      }
      .ticket-top {
        height: .41rem;
        padding: 0 .1rem;
        position: relative;
        display: flex;
        .circle {
          position: absolute;
          z-index: 0;
          width: .36rem;
          height: .36rem;
          border: .02rem solid #eee;
          border-radius: 50%;
          top: -.11rem;
          left: -.04rem;
          color: #eee;
          line-height: .35rem;
          text-align: center;
          font-size: .14rem;
        }
        .price-wrap {
          // width: .33rem;
          display: flex;
          align-items: flex-end;
          font-size: .12rem;
          padding-bottom: .04rem;
          position: relative;
          z-index: 1;
          .money-icon {
            font-size: .12rem;
            padding-bottom: .02rem;
          }
          .num {
            font-size: .2rem;
            font-weight: 700;
            padding-right: .02rem;
          }
          .desc {
            font-size: .1rem;
            color: #999;
            padding-bottom: .02rem;
          }
        }
        &::after {
          width: 100%;
          height: 0rem;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          border-top: .01rem solid #f7f7f7;
        }
      }
      .ticket-bottom {
        flex: 1;
        padding: 0 .1rem;
        font-size: .12rem;
        color:white;
        display: flex;
        align-items: center;
      }
      &::before {
        position: absolute;
        content: "";
        width: .03rem;
        height: .64rem;
        top: 0;
        left: 0;
        z-index: 3;
        background: url("../../../assets/images/cart-icon-4.png")no-repeat right;
        background-size: .03rem .64rem;
        
      }
      &::after {
        position: absolute;
        content: "";
        width: .03rem;
        height: .64rem;
        top: 0;
        right: 0;
        z-index: 3;
        background: url("../../../assets/images/cart-icon-3.png")no-repeat right;
        background-size: .03rem .64rem;
      }
      // background: red;
    }
  }
}
</style>
